﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>订单支付</title>

    <link th:replace="common/common::common-head">
    <div th:replace="common/common :: #common-js"></div>

</head>
<body style="background: rgba(243,240,240,0.27);padding-top: 70px; ">
<div id="pay">

    <div th:replace="common/common :: #common-top-nav"></div>

    <span class="layui-breadcrumb" lay-separator="ㅣ">
      <a th:href="@{/user/home}">首页</a>
      <a th:href="@{/user/shop}">商城</a>
      <a><cite>支付</cite></a>
    </span>

    <form>
        <p><input id="inputmoney" type="text" name="inputmoney" class="form-control" placeholder="请输入金额" required></p>

        <div class="radio">
            <label>
                <p><input type="radio" name="demo1" id="demo1-alipay" value="43" checked="">
                    支付宝支付</p>
            </label>
        </div>
        <div class="radio">
            <label>
                <p><input type="radio" name="demo1" id="demo1-weixin" value="44">
                微信支付</p>
            </label>
        </div>
        <button type="button" id="demoBtn1" @click="pay">确认购买</button>
    </form>

    <form id='formpay' name='formpay' method='get' action='https://gateway.xddpay.com'>
            <div v-for="item in data">
                <div v-if="item !=null && item != ''">
                    <input name='order_no' id='order_no' type='text' v-model="item.order_no" />
                    <input name='subject' id='subject' type='text' v-model="item.subject" />
                    <input name='pay_type' id='pay_type' type='text'  v-model="item.pay_type" />
                    <input name='money' id='money' type='text'  v-model="item.money" />
                    <input name='app_id' id='app_id' type='text'  v-model="item.app_id" />
                    <input name='extra' id='extra' type='text' v-model="item.extra" />
                    <input name='sign' id='sign' type='text'  v-model="item.sign" />
                    <input type='submit' id='submitdemo1'>
                </div>
                <div v-else>
                </div>
            </div>
    </form>
</div>

<div th:replace="common/common :: #common-bottom"></div>

<script type="text/javascript">
    function getistype(){
        return ($("#demo1-alipay").is(':checked') ? "43" : "44" );
    }
        var VueData = null;
            VueData = new Vue({
                el: '#pay',
                data:{
                    data:{
                        app_id: '',
                        order_no: '',
                        money: '',
                        subject: '',
                        pay_type: '',
                        extra: '',
                        sign: '',
                    }
                },
                methods:{
                    pay:function(){
                        $.ajax({
                            url: '/user/shop/pay',
                            data: {
                                money : $("#inputmoney").val(),
                                pay_type : getistype(),
                                app_id : $('#app_id').val(),
                                sign : $('#sign').val()
                            },
                            success:function (data){
                                VueData.data = data.data
                                //$('#submitdemo1').click()
                            }
                        })
                    }
                },
            })
</script>

</body>
</html>
